<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="style/base.css" type="text/css">
    <link rel="stylesheet" href="style/global.css" type="text/css">
    <link rel="stylesheet" href="style/header.css" type="text/css">
    <link rel="stylesheet" href="style/cart.css" type="text/css">
    <link rel="stylesheet" href="style/footer.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

    <!--基于原生的javascript进行 dom 操作实现的。目前来说 我们更加建议的是使用 vuejs 数据驱动进行实现 -->
    <!--<script type="text/javascript" src="js/cart1.js"></script>-->

    <!--


    一般在 购物类型的网站里面，购物车是一个必不可少的部分的。

    例如 常见的 淘宝 ，京东 ，当当 都是存在购物车功能的。

    在做购物网站的时候，购物车的实现有如下几种方案：

    1. 需要用户强制登录的 （淘宝）
        优点：无论何时何地都可以方便的查看自己购物车的数据。

        缺点：用户体验稍微差一点，用户必须登录后才能加入，对第一次使用的用户不太友好。对很多人来说，购物车很多时候是一个收藏的功能，并不是意味着用户想立马购买。

    2. 不需要登录（当当）
            http://shopping.dangdang.com/shoppingcart/shopping_cart

        优点：用户体验好，尤其是对于初次使用的用户

        缺点：不登录的购物车是基于客户端进行存储的，如果更换浏览器则无法查看之前加入购物车的东西，或者换台电脑也无法查看。


    我们参照上面的去做一下购物车的实现。我们基于当当的实现

    目前来说一般做的网站都是前后端分离的，那么在后端还没有写好接口提供的时候，我们前端就需要自己去构建假的数据，然后基于假的数据去做效果，一般我们称之为  mock（假的 模仿） 开发。 稍后 我们自己分析购物车的数据，然后自己去构建假数据 使用 vuejs 去实现。
    -->

</head>
<body>
<!-- 顶部导航 start -->
<div class="topnav">
    <div class="topnav_bd w990 bc">
        <div class="topnav_left">

        </div>
        <div class="topnav_right fr">
            <ul>
                <li>您好，欢迎来到京西！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>]</li>
                <li class="line">|</li>
                <li>我的订单</li>
                <li class="line">|</li>
                <li>客户服务</li>

            </ul>
        </div>
    </div>
</div>
<!-- 顶部导航 end -->

<div style="clear:both;"></div>

<!-- 页面头部 start -->
<div class="header w990 bc mt15">
    <div class="logo w990">
        <h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="京西商城"></a></h2>
        <div class="flow fr">
            <ul>
                <li class="cur">1.我的购物车</li>
                <li>2.填写核对订单信息</li>
                <li>3.成功提交订单</li>
            </ul>
        </div>
    </div>
</div>
<!-- 页面头部 end -->

<div style="clear:both;"></div>

<!-- 主体部分 start -->
<div class="mycart w990 mt10 bc" id="appCart">
    <h2><span>我的购物车</span></h2>
    <table>
        <thead>
        <tr>
            <th class="col1">商品名称</th>
            <th class="col2">商品信息</th>
            <th class="col3">单价</th>
            <th class="col4">数量</th>
            <th class="col5">小计</th>
            <th class="col6">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="ele in cartList">
            <td class="col1"><a href=""><img :src="ele.cover" alt=""/></a> <strong><a href="">{{ ele.goodsName
                }}</a></strong>
            </td>
            <td class="col2">
                <div v-html="ele.descp"></div>
            </td>
            <td class="col3">￥<span>{{ ele.price }}</span></td>
            <td class="col4">
                <a href="javascript:;" @click="sub(ele)" class="reduce_num"></a>
                <input type="text" name="amount" v-model="ele.number" class="amount"/>
                <a href="javascript:;" @click="add(ele)" class="add_num"></a>
            </td>
            <td class="col5"><span>{{ ele.price * ele.number | toFixed(2 , '€') }}</span></td>
            <td class="col6"><a href="javascript:;" @click="remove(ele)">删除</a></td>
        </tr>

        </tbody>
        <tfoot>
        <tr>
            <!--之前的计算属性，因为总计是依赖所有的购物车数据的小计之和-->
            <td colspan="6">购物金额总计： <strong>￥ <span id="total">{{ totalPrice | toFixed(2, '€') }}</span></strong></td>
        </tr>
        </tfoot>
    </table>
    <div class="cart_btn w990 bc mt10">
        <a href="" class="continue">继续购物</a>
        <a href="" class="checkout">结 算</a>
    </div>
</div>
<!-- 主体部分 end -->

<div style="clear:both;"></div>
<!-- 底部版权 start -->
<div class="footer w1210 bc mt15">
    <p class="links">
        <a href="">关于我们</a> |
        <a href="">联系我们</a> |
        <a href="">人才招聘</a> |
        <a href="">商家入驻</a> |
        <a href="">千寻网</a> |
        <a href="">奢侈品网</a> |
        <a href="">广告服务</a> |
        <a href="">移动终端</a> |
        <a href="">友情链接</a> |
        <a href="">销售联盟</a> |
        <a href="">京西论坛</a>
    </p>
    <p class="copyright">
        © 2005-2013 京东网上商城 版权所有，并保留所有权利。 ICP备案证书号:京ICP证070359号
    </p>
    <p class="auth">
        <a href=""><img src="images/xin.png" alt=""/></a>
        <a href=""><img src="images/kexin.jpg" alt=""/></a>
        <a href=""><img src="images/police.jpg" alt=""/></a>
        <a href=""><img src="images/beian.gif" alt=""/></a>
    </p>
</div>
<!-- 底部版权 end -->
</body>
<script src="./lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#appCart',
        data: {
            cartList: [
                {
                    id: 1,
                    cover: './images/cart_goods1.jpg',
                    goodsName: '【1111购物狂欢节】惠JackJones杰克琼斯纯羊毛菱形格',
                    descp: `颜色：073深红 <br/> 尺码：170/92A/S`,
                    price: 499.12,
                    number: 12,
                },
                {
                    id: 2,
                    cover: './images/cart_goods2.jpg',
                    goodsName: '九牧王王正品新款时尚休闲中长款茄克EK01357200',
                    descp: `颜色：淡蓝色 <br/> 尺码：165/88`,
                    price: 1102.00,
                    number: 9,
                },
                {
                    id: 3,
                    cover: './images/cart_goods3.jpg',
                    goodsName: '【1111购物狂欢节】捷王纯手工缝制休闲男鞋大头皮鞋 头层牛',
                    descp: `颜色：0922红棕现货 <br/> 尺码：40现货`,
                    price: 269.00,
                    number: 12,
                }
            ],
        },
        filters: {
            /**
             *过滤器在定义的时候，除了第一个参数是我们待处理的数据，还可以接受其他的参数，其他的参数就是调用时候传递过来的参数
             * @param input 待处理的数据
             * @param length 保留的精度
             * @param prefix 格式化的前缀
             * @returns {string} 处理后的数据
             */
            toFixed: function (input, length, prefix = '¥') {
                return prefix + ' ' + input.toFixed(length);
            }
        },
        methods: {
            sub: function (ele) {
                console.log(ele, 'sub');
                ele.number = ele.number - 1;
                if (ele.number <= 1) {
                    alert('最少购买一件商品');
                    ele.number = 1;
                    return;
                }

            },
            add: function (ele) {
                console.log(ele, 'add');
                ele.number = ele.number + 1;
            },
            remove: function (ele) {
                // 删除当前 filter
                /**
                 * filter这个api的特点：
                 * 数组有多少个元素，则filter里面的函数执行多少次，在每次执行的时候会把数据的当前项传递给该函数，并且该函数的返回值如果为true，则这一项会被保留。并且不会改变原数组。
                 */
                this.cartList = this.cartList.filter(function (item) {
                    return ele !== item; // 当前当前项不是删除项，则保留
                });
            }
        },
        computed: {
            totalPrice: function () {
                // 所有的购物车商品的小计之和
                var total = 0;
                /*this.cartList.forEach(ele => {
                    total += ele.price * ele.number;
                });*/

                /*
                * reduce 聚拢，可以进行求和操作
                * */
                total = this.cartList.reduce(function (prev, item) {
                    return prev + item.price * item.number;
                }, 0);


                return total;
            }
        }
    })

</script>
</html>
